<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:28
-->
<template>
  <div>
    <div id="image3" style="height: 200px;"></div>
  </div>
</template>
<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
  data() {
    return {
      TData: [],
    };
  },
  computed: {},
  methods: {
    columnPlot() {
      const columnPlot = new Column('image3', {
        data: this.TData,
        xField: 'type',
        yField: 'value',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
      });
      columnPlot.render();
    },
    async getFData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      this.TData = res.data;
    }
  },
  created() { 
  },
  async mounted() {
   await this.getFData()
    this.columnPlot();
  },
};
</script>
<style scoped></style>